<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline"
               @keyup.enter="onSubmit">
        <el-form-item label="创建日期" prop="createdAtRange">
          <template #label>
        <span>
          创建日期
          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
            <el-icon><QuestionFilled/></el-icon>
          </el-tooltip>
        </span>
          </template>

          <el-date-picker
              v-model="searchInfo.createdAtRange"
              class="!w-380px"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
          />
        </el-form-item>

        <el-form-item label="商品类型" prop="goodType">
          <el-select v-model="searchInfo.goodType" clearable filterable placeholder="请选择"
                     @clear="()=>{searchInfo.goodType=undefined}">
            <el-option v-for="(item,key) in GoodsClassOptions" :key="key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="商品编码" prop="goodCode">
          <el-input v-model="searchInfo.goodCode" placeholder="搜索条件"/>
        </el-form-item>

        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="searchInfo.goodName" placeholder="搜索条件"/>
        </el-form-item>

        <el-form-item label="品牌" prop="brandId">
          <el-input v-model.number="searchInfo.brandId" placeholder="搜索条件"/>
        </el-form-item>

        <el-form-item label="供应商" prop="suppilerId">
          <el-input v-model.number="searchInfo.suppilerId" placeholder="搜索条件"/>
        </el-form-item>

        <el-form-item label="价格" prop="price">
          <el-input class="!w-40" v-model.number="searchInfo.startPrice" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endPrice" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="划线价" prop="marketPrice">
          <el-input class="!w-40" v-model.number="searchInfo.startMarketPrice" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endMarketPrice" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="成本价" prop="costPrice">
          <el-input class="!w-40" v-model.number="searchInfo.startCostPrice" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endCostPrice" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="库存" prop="stock">
          <el-input class="!w-40" v-model.number="searchInfo.startStock" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endStock" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="重量" prop="weight">
          <el-input class="!w-40" v-model.number="searchInfo.startWeight" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endWeight" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="体积" prop="volume">
          <el-input class="!w-40" v-model.number="searchInfo.startVolume" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endVolume" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="条码" prop="barCode">
          <el-input v-model="searchInfo.barCode" placeholder="搜索条件"/>
        </el-form-item>

        <el-form-item label="物流方式" prop="logisticsWay">
          <el-select v-model="searchInfo.logisticsWay" clearable filterable placeholder="请选择"
                     @clear="()=>{searchInfo.logisticsWay=undefined}">
            <el-option v-for="(item,key) in wayOptions" :key="key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="运费设置" prop="shipFeeSet">
          <el-select v-model="searchInfo.shipFeeSet" clearable filterable placeholder="请选择"
                     @clear="()=>{searchInfo.shipFeeSet=undefined}">
            <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="运费" prop="shipFee">
          <el-input class="!w-40" v-model.number="searchInfo.startShipFee" placeholder="最小值"/>
          —
          <el-input class="!w-40" v-model.number="searchInfo.endShipFee" placeholder="最大值"/>
        </el-form-item>

        <el-form-item label="商品详情" prop="goodDetail">
          <el-input v-model="searchInfo.goodDetail" placeholder="搜索条件"/>
        </el-form-item>

        <el-form-item label="商品上架状态" prop="goodStatus">
          <el-select v-model="searchInfo.goodStatus" clearable filterable placeholder="请选择"
                     @clear="()=>{searchInfo.goodStatus=undefined}">
            <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="商品筛选状态" prop="goodSearchType">
          <el-select v-model="searchInfo.goodSearchType" clearable filterable placeholder="请选择"
                     @clear="()=>{searchInfo.goodSearchType=undefined}">
            <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>


        <template v-if="showAllQuery">
          <!-- 将需要控制显示状态的查询条件添加到此范围内 -->
        </template>

        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
          <el-button link type="primary" icon="arrow-down" @click="showAllQuery=true" v-if="!showAllQuery">展开
          </el-button>
          <el-button link type="primary" icon="arrow-up" @click="showAllQuery=false" v-else>收起</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openDialog()">新增</el-button>
        <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">
          删除
        </el-button>
        <ExportTemplate template-id="goods_LsGoods"/>
        <ExportExcel template-id="goods_LsGoods" filterDeleted/>
        <ImportExcel template-id="goods_LsGoods" @on-success="getTableData"/>
      </div>
      <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          :data="tableData"
          row-key="ID"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>

        <el-table-column sortable align="left" label="日期" prop="CreatedAt" width="180">
          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
        </el-table-column>

        <el-table-column align="left" label="商品类型" prop="goodType" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.goodType, GoodsClassOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="商品编码" prop="goodCode" width="120"/>

        <el-table-column align="left" label="商品名称" prop="goodName" width="120"/>

        <el-table-column align="left" label="品牌" prop="brand" width="120"/>

        <el-table-column align="left" label="商品单位" prop="goodUnit" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.goodUnit, GoodsOnceOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="供应商" prop="suppiler" width="120"/>

        <el-table-column align="left" label="价格" prop="price" width="120"/>

        <el-table-column align="left" label="划线价" prop="marketPrice" width="120"/>

        <el-table-column align="left" label="成本价" prop="costPrice" width="120"/>

        <el-table-column align="left" label="库存" prop="stock" width="120"/>

        <el-table-column align="left" label="重量" prop="weight" width="120"/>

        <el-table-column align="left" label="体积" prop="volume" width="120"/>

        <el-table-column align="left" label="条码" prop="barCode" width="120"/>

        <el-table-column align="left" label="物流方式" prop="logisticsWay" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.logisticsWay, wayOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="运费设置" prop="shipFeeSet" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.shipFeeSet, switchOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="运费" prop="shipFee" width="120"/>

        <el-table-column align="left" label="商品详情" prop="goodDetail" width="120"/>

        <el-table-column align="left" label="库存预警" prop="stockWarn" width="120"/>

        <el-table-column align="left" label="虚拟销量" prop="virtualSaleNum" width="120"/>

        <el-table-column align="left" label="虚拟浏览量" prop="virtualBrowseNum" width="120"/>

        <el-table-column align="left" label="限购方式" prop="limitWay" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.limitWay, switchOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="限购数量" prop="limitNum" width="120"/>

        <el-table-column align="left" label="商品上架状态" prop="goodStatus" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.goodStatus, switchOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="商品筛选状态" prop="goodSearchType" width="120">
          <template #default="scope">
            {{ filterDict(scope.row.goodSearchType, switchOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="排序" prop="sort" width="120"/>

        <el-table-column align="left" label="视频链接" prop="videoUrl" width="120"/>

        <el-table-column align="left" label="创建者" prop="createdBy" width="120"/>

        <el-table-column align="left" label="更新者" prop="updatedBy" width="120"/>

        <el-table-column align="left" label="删除者" prop="deletedBy" width="120"/>

        <el-table-column align="left" label="商品分类" prop="classify" width="120"/>

        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
          <template #default="scope">
            <el-button type="primary" link class="table-button" @click="getDetails(scope.row)">
              <el-icon style="margin-right: 5px">
                <InfoFilled/>
              </el-icon>
              查看
            </el-button>
            <el-button type="primary" link icon="edit" class="table-button" @click="updateLsGoodsFunc(scope.row)">编辑
            </el-button>
            <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false"
               :before-close="closeDialog">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ type === 'create' ? '新增' : '编辑' }}</span>
          <div>
            <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </div>
      </template>

      <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
        <el-tabs v-model="Ontab" type="card">
          <el-tab-pane label="基础设置" name="1" class="mt-3.5">
            <el-form-item label="商品类型:" prop="goodType">
              <el-select v-model="formData.goodType" placeholder="请选择商品类型" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in GoodsClassOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="商品编码:" prop="goodCode">
              <el-input v-model="formData.goodCode" :clearable="true" placeholder="请输入商品编码"/>
            </el-form-item>
            <el-form-item label="商品名称:" prop="goodName">
              <el-input v-model="formData.goodName" :clearable="true" placeholder="请输入商品名称"/>
            </el-form-item>
            <el-form-item label="商品品类" prop="classifyId">
              <el-cascader
                  v-model="formData.classifyId"
                  style="width: 100%"
                  :options="Search.data.class"
                  :show-all-levels="false"
                  :props="{
              multiple: false,
              checkStrictly: true,
              label: 'classify_name',
              value: 'id',
              disabled: 'disabled',
              emitPath: false
            }"
                  :clearable="false"
              />
            </el-form-item>
            <el-form-item label="是否添加视频">
              <el-radio-group v-model="addVideos">
                <el-radio :value="true">添加</el-radio>
                <el-radio :value="false">不添加</el-radio>
                <!--                <el-radio :value="9">Option C</el-radio>-->
              </el-radio-group>
              <!--              <el-switch @click="addVideos=!addVideos"/>-->
            </el-form-item>
            <el-form-item label="视频链接" label-width="80px" v-if="addVideos==true">
              <SelectImage v-model="formData.videoUrl"/>
            </el-form-item>
            <el-form-item label="品牌ID:" prop="brandId">
              <!--    <el-input v-model.number="formData.brandId" :clearable="true" placeholder="请输入品牌ID" />-->
              <el-select v-model="formData.brandId" placeholder="请选择品牌" style="width:100%" filterable :clearable="true"
                         @click="console.log(formData.brandId)">
                <el-option v-for="(item,key) in Search.data.pub" :key="key" :label="item.brand_name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="商品单位:" prop="goodUnit">
              <el-select v-model="formData.goodUnit" placeholder="请选择商品单位" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in GoodsOnceOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商:" prop="suppilerId">
              <el-select v-model="formData.suppilerId" placeholder="请选择供应商" style="width:100%" filterable
                         :clearable="true" @click="console.log(formData.brandId)">
                <el-option v-for="(item,key) in Search.data.supp" :key="key" :label="item.supplier_name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="价格库存" name="2" class="mt-3.5">
            <el-form-item label="是否多规格:" prop="isManySpec">
              <el-select v-model="formData.isManySpec" placeholder="请选择是否多规格" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-button type="primary" size="small" @click="addParameter(formData)" v-if="formData.isManySpec=='开'">
              新增菜单参数
            </el-button>
  <el-table
      :data="formData.ManyPrice"
      style="width: 100%"
      class="parameter-table"
      v-if="formData.isManySpec=='开'"
  >
    <el-table-column align="center" prop="price" label="价格">
      <template #default="scope">
        <el-input
            v-model.number="scope.row.price"
            size="small"
            placeholder="请输入价格"
            type="number"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="marketPrice" label="划线价">
      <template #default="scope">
        <el-input
            v-model.number="scope.row.marketPrice"
            size="small"
            placeholder="请输入划线价"
            type="number"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="costPrice" label="成本价">
      <template #default="scope">
        <el-input
            v-model="scope.row.costPrice"
            size="small"
            placeholder="请输入成本价"
            type="number"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="stock" label="库存">
      <template #default="scope">
        <el-input
            v-model.number="scope.row.stock"
            size="small"
            placeholder="请输入库存"
            type="number"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="weight" label="重量">
      <template #default="scope">
        <el-input
            v-model.number="scope.row.weight"
            size="small"
            placeholder="请输入重量"
            type="number"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="volume" label="体积">
      <template #default="scope">
        <el-input
            v-model.number="scope.row.volume"
            size="small"
            placeholder="请输入体积"
            type="number"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="barCode" label="条码">
      <template #default="scope">
        <el-input
            v-model.number="scope.row.barCode"
            size="small"
            placeholder="请输入条码"
            type="text"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="100">
      <template #default="scope">
        <el-button
            type="danger"
            size="small"
            @click="deleteParameter(formData.ManyPrice, scope.$index)"
        >
          <el-icon><Delete /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
            <el-form-item label="价格:" prop="price" v-if="formData.isManySpec=='关'">
              <el-input-number v-model="formData.price" style="width:100%" :precision="2" :clearable="true"/>
            </el-form-item>
            <el-form-item label="划线价:" prop="marketPrice" v-if="formData.isManySpec=='关'">
              <el-input-number v-model="formData.marketPrice" style="width:100%" :precision="2" :clearable="true"/>
            </el-form-item>
            <el-form-item label="成本价:" prop="costPrice" v-if="formData.isManySpec=='关'">
              <el-input-number v-model="formData.costPrice" style="width:100%" :precision="2" :clearable="true"/>
            </el-form-item>
            <el-form-item label="库存:" prop="stock" v-if="formData.isManySpec=='关'">
              <el-input v-model.number="formData.stock" :clearable="true" placeholder="请输入库存"/>
            </el-form-item>
            <el-form-item label="重量:" prop="weight" v-if="formData.isManySpec=='关'">
              <el-input-number v-model="formData.weight" style="width:100%" :precision="2" :clearable="true"/>
            </el-form-item>
            <el-form-item label="体积:" prop="volume" v-if="formData.isManySpec=='关'">
              <el-input-number v-model="formData.volume" style="width:100%" :precision="2" :clearable="true"/>
            </el-form-item>
            <el-form-item label="条码:" prop="barCode" v-if="formData.isManySpec=='关'">
              <el-input v-model="formData.barCode" :clearable="true" placeholder="请输入条码"/>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="物流设置" name="3" class="mt-3.5">
            <el-form-item label="物流方式:" prop="logisticsWay">
              <el-select v-model="formData.logisticsWay" placeholder="请选择物流方式" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in wayOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="运费设置:" prop="shipFeeSet">
              <el-select v-model="formData.shipFeeSet" placeholder="请选择运费设置" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="运费:" prop="shipFee" v-if="formData.shipFeeSet =='开'">
              <el-input-number v-model="formData.shipFee" style="width:100%" :precision="2" :clearable="true"/>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="4" class="mt-3.5">
            <el-form-item label="商品详情:" prop="goodDetail">
              <!--    <el-input v-model="formData.goodDetail" :clearable="true" placeholder="请输入商品详情" />-->
              <RichEdit v-model="formData.goodDetail" placeholder="请输入商品详情"></RichEdit>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="销售设置" name="5" class="mt-3.5">
            <el-form-item label="库存预警:" prop="stockWarn">
              <el-input v-model.number="formData.stockWarn" :clearable="true" placeholder="请输入库存预警"/>
            </el-form-item>
            <el-form-item label="虚拟销量:" prop="virtualSaleNum">
              <el-input v-model.number="formData.virtualSaleNum" :clearable="true" placeholder="请输入虚拟销量"/>
            </el-form-item>
            <el-form-item label="虚拟浏览量:" prop="virtualBrowseNum">
              <el-input v-model.number="formData.virtualBrowseNum" :clearable="true" placeholder="请输入虚拟浏览量"/>
            </el-form-item>
            <el-form-item label="限购方式:" prop="limitWay">
              <el-select v-model="formData.limitWay" placeholder="请选择限购方式" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="限购数量:" prop="limitNum" v-if="formData.limitWay == '开'">
              <el-input v-model.number="formData.limitNum" :clearable="true" placeholder="请输入限购数量"/>
            </el-form-item>
            <el-form-item label="商品上架状态:" prop="goodStatus">
              <el-select v-model="formData.goodStatus" placeholder="请选择商品上架状态" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="商品筛选状态:" prop="goodSearchType">
              <el-select v-model="formData.goodSearchType" placeholder="请选择商品筛选状态" style="width:100%" filterable
                         :clearable="true">
                <el-option v-for="(item,key) in switchOptions" :key="key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
              <el-input v-model.number="formData.sort" :clearable="true" placeholder="请输入排序"/>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-drawer>

    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true"
               :before-close="closeDetailShow" title="查看">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="商品类型">
          {{ detailForm.goodType }}
        </el-descriptions-item>
        <el-descriptions-item label="商品编码">
          {{ detailForm.goodCode }}
        </el-descriptions-item>
        <el-descriptions-item label="商品名称">
          {{ detailForm.goodName }}
        </el-descriptions-item>
        <el-descriptions-item label="是否添加视频">
          {{ detailForm.isVideo }}
        </el-descriptions-item>
        <el-descriptions-item label="品牌ID">
          {{ detailForm.brandId }}
        </el-descriptions-item>
        <el-descriptions-item label="商品单位">
          {{ detailForm.goodUnit }}
        </el-descriptions-item>
        <el-descriptions-item label="供应商ID">
          {{ detailForm.suppilerId }}
        </el-descriptions-item>
        <el-descriptions-item label="是否多规格">
          {{ detailForm.isManySpec }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">
          {{ detailForm.price }}
        </el-descriptions-item>
        <el-descriptions-item label="划线价">
          {{ detailForm.marketPrice }}
        </el-descriptions-item>
        <el-descriptions-item label="成本价">
          {{ detailForm.costPrice }}
        </el-descriptions-item>
        <el-descriptions-item label="库存">
          {{ detailForm.stock }}
        </el-descriptions-item>
        <el-descriptions-item label="重量">
          {{ detailForm.weight }}
        </el-descriptions-item>
        <el-descriptions-item label="体积">
          {{ detailForm.volume }}
        </el-descriptions-item>
        <el-descriptions-item label="条码">
          {{ detailForm.barCode }}
        </el-descriptions-item>
        <el-descriptions-item label="物流方式">
          {{ detailForm.logisticsWay }}
        </el-descriptions-item>
        <el-descriptions-item label="运费设置">
          {{ detailForm.shipFeeSet }}
        </el-descriptions-item>
        <el-descriptions-item label="运费">
          {{ detailForm.shipFee }}
        </el-descriptions-item>
        <el-descriptions-item label="商品详情">
          {{ detailForm.goodDetail }}
        </el-descriptions-item>
        <el-descriptions-item label="库存预警">
          {{ detailForm.stockWarn }}
        </el-descriptions-item>
        <el-descriptions-item label="虚拟销量">
          {{ detailForm.virtualSaleNum }}
        </el-descriptions-item>
        <el-descriptions-item label="虚拟浏览量">
          {{ detailForm.virtualBrowseNum }}
        </el-descriptions-item>
        <el-descriptions-item label="限购方式">
          {{ detailForm.limitWay }}
        </el-descriptions-item>
        <el-descriptions-item label="限购数量">
          {{ detailForm.limitNum }}
        </el-descriptions-item>
        <el-descriptions-item label="商品上架状态">
          {{ detailForm.goodStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="商品筛选状态">
          {{ detailForm.goodSearchType }}
        </el-descriptions-item>
        <el-descriptions-item label="排序">
          {{ detailForm.sort }}
        </el-descriptions-item>
        <el-descriptions-item label="视频链接">
          {{ detailForm.videoUrl }}
        </el-descriptions-item>
        <el-descriptions-item label="创建者">
          {{ detailForm.createdBy }}
        </el-descriptions-item>
        <el-descriptions-item label="更新者">
          {{ detailForm.updatedBy }}
        </el-descriptions-item>
        <el-descriptions-item label="删除者">
          {{ detailForm.deletedBy }}
        </el-descriptions-item>
        <el-descriptions-item label="classifyId字段">
          {{ detailForm.classifyId }}
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  createLsGoods,
  deleteLsGoods,
  deleteLsGoodsByIds,
  updateLsGoods,
  findLsGoods,
  getLsGoodsList, getLsGoodsPublic
} from '@/api/goods/lsGoods'

// 全量引入格式化工具 请按需保留
import {
  getDictFunc,
  formatDate,
  formatBoolean,
  filterDict,
  filterDataSource,
  returnArrImg,
  onDownloadFile
} from '@/utils/format'
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref, reactive} from 'vue'
import {useAppStore} from "@/pinia"

// 导出组件
import ExportExcel from '@/components/exportExcel/exportExcel.vue'
// 导入组件
import ImportExcel from '@/components/exportExcel/importExcel.vue'
// 导出模板组件
import ExportTemplate from '@/components/exportExcel/exportTemplate.vue'
import SelectImage from "@/components/selectImage/selectImage.vue";
import RichEdit from "@/components/richtext/rich-edit.vue";
import {Delete} from "@element-plus/icons-vue";


defineOptions({
  name: 'LsGoods'
})

// 提交按钮loading
const btnLoading = ref(false)
const appStore = useAppStore()
var Ontab="1"
// 控制更多查询条件显示/隐藏状态
const showAllQuery = ref(false)

// 自动化生成的字典（可能为空）以及字段
const GoodsClassOptions = ref([])
const GoodsOnceOptions = ref([])
const wayOptions = ref([])
const switchOptions = ref([])
var addVideos = false
const formData = ref({
  ManyPrice:[],
  goodType: '',
  goodCode: '',
  goodName: '',
  isVideo: '',
  brandId: undefined,
  goodUnit: '',
  suppilerId: undefined,
  isManySpec: '',
  price: 0,
  marketPrice: 0,
  costPrice: 0,
  stock: undefined,
  weight: 0,
  volume: 0,
  barCode: '',
  logisticsWay: '',
  shipFeeSet: '',
  shipFee: 0,
  goodDetail: '',
  stockWarn: undefined,
  virtualSaleNum: undefined,
  virtualBrowseNum: undefined,
  limitWay: '',
  limitNum: undefined,
  goodStatus: '',
  goodSearchType: '',
  sort: undefined,
  videoUrl: '',
  classifyId: undefined,
})


// 验证规则
const rule = reactive({
  goodType: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  goodCode: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  goodName: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  isVideo: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  brandId: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  goodUnit: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  suppilerId: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  isManySpec: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  price: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  marketPrice: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  costPrice: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  stock: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  weight: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  volume: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
  ],
  barCode: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  logisticsWay: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  shipFeeSet: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  goodDetail: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  limitWay: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
  goodStatus: [{
    required: true,
    message: '',
    trigger: ['input', 'blur'],
  },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    }
  ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
var Search = {}
// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    if (!valid) return
    page.value = 1
    getTableData()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  const table = await getLsGoodsList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
  GoodsClassOptions.value = await getDictFunc('GoodsClass')
  GoodsOnceOptions.value = await getDictFunc('GoodsOnce')
  wayOptions.value = await getDictFunc('way')
  switchOptions.value = await getDictFunc('switch')
  Search = await getLsGoodsPublic()
}

// 获取需要的字典 可能为空 按需保留
setOptions()


// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteLsGoodsFunc(row)
  })
}

// 多选删除
const onDelete = async () => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const IDs = []
    if (multipleSelection.value.length === 0) {
      ElMessage({
        type: 'warning',
        message: '请选择要删除的数据'
      })
      return
    }
    multipleSelection.value &&
    multipleSelection.value.map(item => {
      IDs.push(item.ID)
    })
    const res = await deleteLsGoodsByIds({IDs})
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      if (tableData.value.length === IDs.length && page.value > 1) {
        page.value--
      }
      getTableData()
    }
  })
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateLsGoodsFunc = async (row) => {
  const res = await findLsGoods({ID: row.ID})
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data
    dialogFormVisible.value = true
  }
}


// 删除行
const deleteLsGoodsFunc = async (row) => {
  const res = await deleteLsGoods({ID: row.ID})
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    getTableData()
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)

// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  addVideos = false
  formData.value = {
    goodType: '',
    goodCode: '',
    goodName: '',
    isVideo: '',
    brandId: undefined,
    goodUnit: '',
    suppilerId: undefined,
    isManySpec: '',
    price: 0,
    marketPrice: 0,
    costPrice: 0,
    stock: undefined,
    weight: 0,
    volume: 0,
    barCode: '',
    logisticsWay: '',
    shipFeeSet: '',
    shipFee: 0,
    goodDetail: '',
    stockWarn: undefined,
    virtualSaleNum: undefined,
    virtualBrowseNum: undefined,
    limitWay: '',
    limitNum: undefined,
    goodStatus: '',
    goodSearchType: '',
    sort: undefined,
    videoUrl: '',
    classifyId: undefined,
  }
}
// 弹窗确定
const enterDialog = async () => {
  btnLoading.value = true
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return btnLoading.value = false

    // 转换多规格数据中的字符串为数字
    if (formData.value.ManyPrice && formData.value.ManyPrice.length) {
      formData.value.ManyPrice = formData.value.ManyPrice.map(item => {
        return {
          ...item,
          price: item.price ? parseFloat(item.price) : 0,
          marketPrice: item.marketPrice ? parseFloat(item.marketPrice) : 0,
          costPrice: item.costPrice ? parseFloat(item.costPrice) : 0,
          stock: item.stock ? parseInt(item.stock) : 0,
          weight: item.weight ? parseFloat(item.weight) : 0,
          volume: item.volume ? parseFloat(item.volume) : 0,
          // barCode 是字符串，不需要转换
        }
      })
    }

    let res
    switch (type.value) {
      case 'create':
        res = await createLsGoods(formData.value)
        break
      case 'update':
        res = await updateLsGoods(formData.value)
        break
      default:
        res = await createLsGoods(formData.value)
        break
    }
    btnLoading.value = false
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

const detailForm = ref({})

// 查看详情控制标记
const detailShow = ref(false)


// 打开详情弹窗
const openDetailShow = () => {
  detailShow.value = true
}


// 打开详情
const getDetails = async (row) => {
  // 打开弹窗
  const res = await findLsGoods({ID: row.ID})
  if (res.code === 0) {
    detailForm.value = res.data
    openDetailShow()
  }
}


// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false
  detailForm.value = {}
}

const addParameter = (formData) => {
  if (!formData.ManyPrice) {
    formData.ManyPrice = []
  }
  formData.ManyPrice.push({
    type: 'query',
    key: '',
    value: ''
  })
}

const deleteParameter = (parameters, index) => {
  parameters.splice(index, 1)
}

</script>

<style>

</style>
